<template>
  <div class="recomm">
         <div v-for="(item,index) in recommend" :key="index" class="recomm-item">
             <a :href="item.link" class="recommbox">
                 <img :src="item.image"/>
                <div>{{item.title}}</div>
             </a>
         </div>
  </div>
</template>

<script>
export default {
     props:{
         recommend:{
             type:Array,
             default(){
                 return []
             }
         }
     }
}
</script>

<style scoped>
    .recomm{
        display: flex;
        text-align: center;
        font-size: 12px;
        color:#666;
        text-decoration: none;
        padding: 10px;
        border-bottom: 8px solid #eee;
        padding-bottom:20px ;
    }
    .recomm-item{
        flex: 1;
      
    }
     .recomm-item img{
         width: 70px;
         height: 70px;
         margin-bottom: 2px;
     }
    .recommbox{
        font-size: 12px;
        color:#666;
        text-decoration: none;
    }
    a{
      -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    }
</style>